<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
      :is_right="true"
    ></gltitle>

    <div class="container">
      <div class="module1">
        <div class="le">
          <div class="n">{{ $t("page4.doc59") }}</div>
          <div class="con">
            <input
              type="text"
              @click="type_show = true"
              :placeholder="$t('page4.doc66')"
              v-model="types"
              readonly
            />
            <img src="../../assets/images/subscript_icon.png" alt="" />
          </div>
        </div>
        <div class="ri">
          <div class="n">{{ $t("page4.doc60") }}</div>
          <div class="con">
            <input
              type="text"
              @click="type_shows = true"
              :placeholder="$t('page4.doc66')"
              v-model="mainnet"
              readonly
            />
            <img src="../../assets/images/subscript_icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="module2">
        <div class="n">{{ $t("page4.doc61") }}</div>
        <div class="con">
          <input
            type="text"
            :placeholder="$t('page4.doc62')"
            onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
            onkeyup="this.value=this.value.replace(/[, ]/g,'')"
            v-model="address"
          />
        </div>
      </div>
      <!--邮箱验证码-->
      <SendCodeInp
        v-model="code"
        :title="$t('page4.doc156')"
        :placeholder="$t('page4.doc157')"
        :rightText="userData.email"
        :accountType="1"
        :account="userData.email"
        verifyType="4"
        class="mt"
      />
    </div>
    <div class="but_sevn" @click="sevn">
      <div class="but">
        {{ $t("page4.doc64") }}
      </div>
    </div>
    <van-popup v-model="type_show" round position="bottom">
      <van-picker
        :title="$t('page.doc9')"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        item-height=".8rem"
        :confirm-button-text="$t('page.doc83')"
        :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>

    <van-popup v-model="type_shows" round position="bottom">
      <van-picker
        :title="$t('page.doc9')"
        show-toolbar
        :columns="columnss"
        @confirm="onConfirms"
        @cancel="onCancels"
        item-height=".8rem"
        :confirm-button-text="$t('page.doc83')"
        :cancel-button-text="$t('page4.doc63')"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: this.$t("page4.doc58"),
      columns: [],
      type_show: false,
      columnss: [],
      type_shows: false,

      types: "",
      mainnet: "",
      types_type: "",
      mainnet_type: "",
      address: "",
      datatype: [],
      multiChainData: [],
      isBtn: false,
      code: "",
    };
  },

  mounted() {
    // this.getBilist();
    this.gettype();
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  watch: {},
  methods: {
    onConfirm(value, index) {
      this.types = value;
      this.types_type = this.datatype[index].coinId;
      this.mainnet = "";
      this.multiChainData = this.datatype[index].multiChainData;
      this.columnss = [];
      this.multiChainData.forEach((e) => {
        this.columnss.push(e.tokenType);
      });
      // this.types_type = this.datatype[index].coinId;
      this.type_show = false;
    },
    onCancel() {
      this.type_show = false;
    },
    onConfirms(value, index) {
      this.mainnet = value;
      this.mainnet_type = this.multiChainData[index].chainName;
      // this.mainnet_type = value;
      this.type_shows = false;
    },
    onCancels() {
      this.type_shows = false;
    },
    gettype() {
      // this.$post(this.URL.user.wallet_type,{coinId: 1}).then((res) => {
      //   if (res.code == 0) {
      //     this.datatype = res.data;
      //     res.data.forEach((e) => {
      //       this.columns.push(e.name)
      //     });
      //   }
      // });
      this.isBtn = false;
      this.$post(this.URL.wallet.coinList, { type: 2 }).then((res) => {
        if (res.code == 0) {
          this.datatype = res.data;
          res.data.forEach((e) => {
            this.columns.push(e.coinName);
          });

          this.multiChainData = res.data[0].multiChainData;
          res.data[0].multiChainData.forEach((e) => {
            this.columnss.push(e.tokenType);
          });
        }
      });
    },
    sevn() {
      if (!this.address) {
        return this.$toast(this.$t("page4.doc62"));
      }
      if (!this.code) {
        return this.$toast(this.$t("page4.doc157"));
      }
      if (this.isBtn) {
        return;
      }
      this.isBtn = true;
      this.$post(this.URL.wallet.address_create, {
        code: this.code,
        coinId: this.types_type,
        chainName: this.mainnet_type,
        address: this.address,
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.$router.go(-1);
        } else {
          this.isBtn = false;
          this.$toast(res.message);
        }
      });
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mt {
  margin-top: 0.32rem;
}

.module1,
.module2 {
  input {
    background: none;
    border: none;
    width: 100%;
  }
}

.module1 {
  margin-top: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .le,
  .ri {
    margin-right: 0.32rem;

    .con {
      margin-top: 0.24rem;
      padding: 0.24rem;
      background-color: #181c21;
      color: #fff;
      font-family: PingFang HK;
      font-size: 0.28rem;
      font-style: normal;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0.14rem;

      img {
        height: 0.08rem;
      }
    }
  }

  .ri {
    margin-right: 0rem;
  }
}

.module2 {
  margin-top: 0.32rem;

  .con {
    margin-top: 0.24rem;
    padding: 0.24rem;
    background-color: #181c21;
    color: #fff;
    font-family: PingFang HK;
    font-size: 0.28rem;
    font-style: normal;
    font-weight: 500;
    border-radius: 0.14rem;
  }
}

.but_sevn {
  bottom: 0.94rem;
  position: fixed;
  bottom: 0.64rem;
  width: 100%;
  max-width: 8.5rem;
  padding: 0rem 0.44rem;

  .but {
    border-radius: 50rem;
    color: #000;
    text-align: center;
    font-family: PingFang SC;
    font-size: 0.28rem;
    font-style: normal;
    font-weight: 500;
    padding: 0.3rem 0rem;
    background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
  }
}
</style>
